<template>
  <page-wrap back hide-tab :title="oppInfo.name || '聊天'" stay-still :hideSafeArea="true">
    <template slot="title">
      <view class="title-container">
        <view v-if="consultantInfo" class="adviser-title">
          <view class="name-title"><span>{{ consultantInfo.iname || oppInfo.name || chatId }}</span>
          </view>

          <view class="adviser-role">
            {{ isZhituUser ? "职业顾问" : "职途人才" }}
          </view>
        </view>
        <view class="experience-type" v-if="editionType == 20 && isConsultant && isBuy == 0">体验</view>
      </view>
    </template>
    <view class="chat">
      <view class="chat-serve-time">
        <span>在线顾问服务时间上午9:00-12:00，下午14:00-18:00</span>
      </view>
      <view class="consult-state">
        <span :class="{ stepActive: index <= activeIndex }" v-for="(item, index) in consultState" :key="index">{{ item
          }}<span v-if="index !== consultState.length - 1" :class="{
              stepArrowActive: index < activeIndex,
              stepArrow: index >= activeIndex,
            }" style="margin-left: 28rpx; margin-right: 24rpx">
            >
          </span>
        </span>
      </view>
      <view class="book-info" v-if="haveAppointment" @click="gotoBookDetail">
        <view class="left-image">
          <image class="book-image" :src="bookLogo"></image>
        </view>
        <view class="right-info">
          <view class="title" v-if="!isConsultant">你的预约信息</view>
          <view class="title" v-if="isConsultant">
            <!-- {{
              showConsutlantName != "" ? showConsutlantName : "你"
            }} -->
            {{ consultantInfo.iname || oppInfo.name }}
            的预约信息
          </view>
          <view class="book-time">咨询时间:{{ bookTime }}</view>
        </view>
      </view>
      <!-- 这里要先判断是否是体验权益再展示不同的提示语句，通过editionType进行判断 -->
      <!-- <view class="remind-time-info" v-if="haveAppointment && !inTimeScope">
        <view class="aside-line"></view>
        <view class="info" v-if="editionType == 10 || isBuy == 1">你的咨询时间还未到~</view>
        <view class="info" v-if="editionType == 20 && isBuy == 0">你的顾问咨询服务体验时间还未到~</view>
        <view class="aside-line"></view>
      </view> -->
      <!-- <view
        class="remind-time-info"
        v-if="
          !haveAppointment && !inTimeScope && editionType == 20 && isBuy == 0
        ">
        <view class="aside-line"></view>
        <view class="info" v-if="!isConsultant">你的顾问咨询服务体验时间已结束~</view>
        <view class="info" v-if="isConsultant">用户咨询服务体验时间已结束~</view>
        <view class="aside-line"></view>

      </view> -->
      <!-- <view
        class="remind-time-info"
        v-if="
      </view>
      <view class="remind-time-info" v-if="
          !haveAppointment && !inTimeScope && editionType == 10 && isBuy == 1
        <view class="aside-line"></view>
      </view> -->
      <scroll-view class="chat-list" id="chat-list" ref="chatList" scroll-y upper-threshold="1"
        :scroll-into-view="toLast" @scrolltoupper="handleMore">
        <u-loadmore class="list-more" :status="moreLoading" :load-text="loadText" v-if="moreLoading != 'nomore'" />
        <view class="chat-item" v-for="(item, index) in chatList" :key="index" :id="'item' + (index + 1)">
          <view class="item-time" v-if="item.showTime">{{
            item.timeParse
          }}</view>

          <!-- 这里可以写中立卡片 -->
          <!-- marketingCard是49.9购买卡片 对应消息类型是205 后面再加其他的要通过v-if else else-if来加别的 -->
          <marketingCard v-if="
              item.contentParse.share && item.contentParse.share.type == 205
            " :isConsultant="isConsultant" />
          <zhituRateCard v-else-if="
              item.contentParse.share &&
              item.contentParse.share.type == 204
            " :share="item.contentParse.share && item.contentParse.share" :isConsultant="isConsultant"
            @sendSingleTextMsg="sendSingleTextMsg" />
          <overdueCard v-else-if="
              inTimeScope == false &&
              item.contentParse.share &&
              item.contentParse.share.type == 206
            " :haveAppointment="haveAppointment" :inTimeScope="inTimeScope" :editionType="editionType" :isBuy="isBuy"
            :isConsultant="isConsultant" />
          <nonarrivalCard v-else-if="
              item.contentParse.share && item.contentParse.share.type == 207
            " :haveAppointment="haveAppointment" :inTimeScope="inTimeScope" :editionType="editionType"
            :isBuy="isBuy" />
          <resumeOptimizationCard v-else-if="
              item.contentParse.share && item.contentParse.share.type == 209
            " :isConsultant="isConsultant" :isBuy="item.contentParse.share.isBuy" />
          <interviewCoachingCard v-else-if="
              item.contentParse.share && item.contentParse.share.type == 210
            " :isConsultant="isConsultant" :isBuy="item.contentParse.share.isBuy" />
          <rightTimeCard v-else-if="
              item.contentParse.share && item.contentParse.share.type == 208
            " :haveAppointment="haveAppointment" :inTimeScope="inTimeScope" :editionType="editionType" :isBuy="isBuy"
            :isConsultant="isConsultant" />
          <!-- 对方 -->
          <view :class="{
              'item-opp': true,
              'item-panel-container': item.contentParse.share.type == 203,
            }" data-type="unread" :data-item="item" v-else-if="chatId === item.content.from_id">
            <image class="item-avatar" :src="oppInfo.avatar" @click="handleClickAvatar(item)"></image>
            <!-- 职图进度卡片(顾问给用户发的)，如果需要加卡片那就在后面继续加v-else-if ,注意！当你删掉第一个if的时候要把第一个else-if改成if -->
            <view class="item-content item-text" v-html="item.contentParse.content" v-if="item.contentParse.type == 1">
            </view>
            <!-- 图片 -->
            <view class="item-content image wechatQrcode" v-else-if="item.contentParse.share.type == 4">
              <image :src="item.contentParse.share.slave.path" mode="widthFix"
                @click="handlePreviewImage(item.contentParse.share.slave.path)"></image>
              <ivew class="wechatQrcodeTips">长按识别/保存顾问企微，更高效沟通</ivew>
            </view>

            <zhituServiceCardwithProgress v-else-if="
                item.contentParse.share && item.contentParse.share.type == 201
              " :service="
                item.contentParse.share && item.contentParse.share.service
              " :chatId="chatId" :fromId="item.content.from_id" :isConsultant="isConsultant" />
            <!-- 职途结果卡片（用户给顾问发点） -->
            <zhituServiceResultCard v-else-if="
                item.contentParse.share && item.contentParse.share.type == 202
              " :service="
                item.contentParse.share && item.contentParse.share.service
              " :chatId="chatId" :fromId="item.content.from_id" :isConsultant="isConsultant" />
            <!-- 自动发送的时候的询问内容的卡片 -->
            <view class="item-content item-panel" v-else-if="item.contentParse.share.type == 203">
              <view class="item-panel-msg">
                {{ item.contentParse.content }}
              </view>
              <view class="item-panel-content">
                <view class="item-panel-content-button" v-for="(item, index) in panelBtnList" :key="index"
                  @click="handlePanelButtonClick(item)">{{ item.rightName || item.title }}
                </view>
              </view>
            </view>
            <view class="item-content image" v-else-if="item.contentParse.share.type == 4">
              <image :src="item.contentParse.share.slave.path" mode="widthFix" show-menu-by-longpress="true"
                @click="handlePreviewImage(item.contentParse.share.slave.path)"></image>
            </view>
            <view class="item-content item-file" v-else-if="item.contentParse.share.type == 100"
              @click="handleFileClick(item.contentParse.share.slave)">
              <text class="icon icon-file"></text>
              <view class="file-name u-line-2">
                {{ item.contentParse.share.slave.name }}
              </view>
            </view>

            <view class="item-content other" v-else>
              <u-icon name="bell" size="48"></u-icon>

              <view class="cont-title" v-if="item.contentParse.share.type == 60">
                {{
                  msgTypeList[60][
                    item.contentParse.share.slave.mobile_exchange_state
                  ]
                }}
              </view>
              <view class="cont-title" v-else-if="item.contentParse.share.type == 70">
                {{ msgTypeList[70][item.contentParse.share.slave.state] }}
              </view>
              <view class="cont-title" v-else>
                {{
                  msgTypeList[item.contentParse.share.type] ||
                  "请在APP内查看此类型消息"
                }}
              </view>
              <view class="cont-tips" v-if="tips">{{ tips }}</view>
            </view>
          </view>
          <!-- 自己 -->
          <view :class="{ 'item-self': true, pinkBG: true }" v-else>
            <text class="read-status">{{
              item.unreadCount === 0 ? "已读" : "未读"
            }}</text>

            <view class="item-content item-text" v-if="item.contentParse.type == 1">{{ item.contentParse.content }}
            </view>
            <!-- 职图进度卡片(顾问给用户发的)，如果需要加卡片那就在后面继续加v-else-if ,注意！当你删掉第一个if的时候要把第一个else-if改成if -->
            <zhituServiceCardwithProgress v-else-if="
                item.contentParse.share && item.contentParse.share.type == 201
              " :service="
                item.contentParse.share && item.contentParse.share.service
              " :chatId="chatId" :fromId="item.content.from_id" :isConsultant="isConsultant" />
            <!-- 职途结果卡片（用户给顾问发点） -->
            <zhituServiceResultCard v-else-if="
                item.contentParse.share && item.contentParse.share.type == 202
              " :service="
                item.contentParse.share && item.contentParse.share.service
              " :chatId="chatId" :fromId="item.content.from_id" :isConsultant="isConsultant" />
            <view class="item-content image" v-else-if="item.contentParse.share.type == 4">
              <image :src="item.contentParse.share.slave.path" mode="widthFix" show-menu-by-longpress="true"
                @click="handlePreviewImage(item.contentParse.share.slave.path)"></image>
            </view>
            <view class="item-content item-file" v-else-if="item.contentParse.share.type == 100"
              @click="handleFileClick(item.contentParse.share.slave)">
              <text class="icon icon-file"></text>
              <view class="file-name u-line-2">
                {{ item.contentParse.share.slave.name }}
              </view>
            </view>
            <view class="item-content other" v-else>
              <u-icon name="bell" size="48"></u-icon>

              <view class="cont-title" v-if="item.contentParse.share.type == 60">
                {{
                  msgTypeList[60][
                    item.contentParse.share.slave.mobile_exchange_state
                  ]
                }}
              </view>
              <view class="cont-title" v-else-if="item.contentParse.share.type == 70">
                {{ msgTypeList[70][item.contentParse.share.slave.state] }}
              </view>
              <view class="cont-title" v-else>
                {{
                  msgTypeList[item.contentParse.share.type] ||
                  "请在APP内查看此类型消息"+item.contentParse.share.type
                }}
              </view>
              <view class="cont-tips" v-if="tips">{{ tips }}</view>
            </view>
            <image class="item-avatar" :src="selfInfo.pic" @click="handleClickAvatar(item)"></image>
          </view>
        </view>
        <!-- <view class="marketing-card">
          <view class="left-image"></view>
          <view class="right-info">
            <span class="title">职途顾问服务</span>
            <span class="desc">1V1精细化服务，助力人才求职</span>
            <view class="price-info">
              <span class="current-price">￥49.9</span>
              <view class="original-price"
                >￥299
                <view class="red-line"></view>
              </view>
              <view class="falsh-sales">限时特惠</view>
            </view>
          </view>
          <view class="buy-button" v-if="!isConsultant">去购买</view>
        </view> -->
      </scroll-view>

      <view class="chat-send-wrap" :style="
          'padding-bottom:calc(' +
          inputBottom +
          'px + ' +
          inputBottomUsual +
          'rpx)'
        ">
        <view class="chat-tools-container">
          <chatTools @showPopupContent="showMyPopup" :bookTime="bookTime" :hansRealChat="hansRealChat"
            :isConsultant="isConsultant" :isZhituUser="isZhituUser" @createMsgContent="createMsgContent"
            :chatId="chatId" :selfInfo="selfInfo" @setSystemMsg="setSystemMsg" :consultantInfo="consultantInfo"
            :personId="personId" :chatList="chatList" v-if="isChatToolsShow" @sendSingleTextMsg="sendSingleTextMsg" />
        </view>
        <view class="chat-send">
          <my-textarea :class="['chat-input', lines]" :value.sync="sendText" :replace="false" :clearDisabled="true"
            :focus.sync="inputFocus" :holdKeyboard="true" placeholder="请输入聊天内容" @board-change="handleBoardChange"
            @line-change="handleLinechange"></my-textarea>
          <view v-show="sendText" @click="handleSendMsg">
            <view class="text text-send">发送</view>
          </view>
          <view v-show="!sendText" @click="handleMoreSendClick">
            <text class="icon icon-add"></text>
          </view>
        </view>
        <!-- 发送更多 -->
        <view v-if="moreSendVisible" class="more-send">
          <template>
            <view class="more-send-item" @click="handleSendPic">
              <image class="img" :src="img"></image>
              <text>图片</text>
            </view>
            <view class="more-send-item" @click="handleSendFile">
              <image class="img" :src="file"></image>
              <text>文件</text>
            </view>
            <view class="more-send-item" @click="openRightsBox">
              <image class="img" :src="chatRightProgress" v-if="isConsultant"></image>
              <image class="img" :src="chatResult" v-else></image>
              <text>{{ isConsultant ? "权益" : "结果" }}</text>
            </view>
            <!-- 只有体验春风行动的情况才有这个按钮 -->
            <view class="more-send-item" v-if="isConsultant" @click="showMoreCardPopup">
              <image class="img" :src="chatResult"></image>
              <text>权益营销页</text>
            </view>
          </template>
        </view>
      </view>
      <u-popup mode="bottom" v-model="showPopup" v-if="showPopup">
        <view class="content" style="height: 80vh">
          <view class="header">
            <span>预约咨询时间</span>
            <u-icon name="close" @click="closePopup"></u-icon>
          </view>
          <view class="serve-time">
            <span>在线顾问服务时间上午9:00-12:00，下午14:00-18:00</span>
          </view>
          <view class="choose-day">
            <scroll-view :scroll-x="true" class="scrollview-box">
              <block v-for="(item, index) in nextSevenDays" :key="index">
                <view :class="[
                    index === selecetedDay
                      ? 'day-button-selected'
                      : 'day-button',
                  ]" :style="[
                    {
                      background:
                        index == selecetedDay
                          ? '#FFFFFF'
                          : item.available == 10
                          ? '#FFFFFF'
                          : '#EAEAEA',
                    },
                  ]" @click="changeselecetedDay(item, index)">
                  <span>{{
                    index === 0 ? "今天" : nextSevenDays[index].weekDay
                  }}</span>
                  <span>{{ nextSevenDays[index].day }}</span>
                  <span :style="[
                      {
                        color:
                          item.available === 10
                            ? '#00B03F'
                            : item.available === 30
                            ? '#FF670F'
                            : '#888888',
                      },
                    ]">{{
                      item.available === 10
                        ? "可预约"
                        : item.available === 30
                        ? "约满"
                        : "暂无"
                    }}</span>
                </view>
              </block>
            </scroll-view>
          </view>
          <view class="time-list-border">
            <scroll-view scroll-y="true" class="time-list">
              <view class="time-card" v-for="(item, index) in timeList" :key="index" @click="bookConsultant(item)">
                <view class="time-card-left">
                  <view class="available-time">{{ item.showTimeScopeStart }}-{{
                      item.showTimeScopeEnd
                    }}</view>
                  <view class="available-number" :style="[
                      {
                        backgroundColor:
                          item.canAppointmentNumber > 0 ? '#30cc67' : '#D2D2D2',
                      },
                    ]">
                    <span>可预约 {{ item.canAppointmentNumber }} 人</span>
                  </view>
                </view>
                <u-icon name="arrow-right" style="margin-right: 32rpx"></u-icon>
              </view>
            </scroll-view>
          </view>
        </view>
      </u-popup>
    </view>
    <u-select v-model="showCompanyPhone" mode="single-column" :list="companyPhoneList"
      @confirm="companyPhoneConfirm"></u-select>
    <!-- 这个是顾问用来发权益卡片的 -->
    <myRightsBottomPopup ref="myRightsBottomPopup" :isConsultant="isConsultant" :chatId="chatId" :selfInfo="selfInfo"
      @createMsgContent="createMsgContent" :oppInfo="oppInfo" />
    <!-- 这个是职途卡用户用来发权益卡片的 -->
    <myRightsBottomPopupForUser ref="myRightsBottomPopupForUser" :isConsultant="isConsultant" :chatId="chatId"
      :selfInfo="selfInfo" @createMsgContent="createMsgContent" :oppInfo="oppInfo" />
    <u-popup class="more-card" v-if="showMoreCard" v-model="showMoreCard" closeable="true" mode="bottom"
      border-radius="14" width="100%" height="70%">
      <view class="top">
        <view class="cancel-button" @click="showMoreCard = false">取消</view>
        <view class="title">发送权益营销页</view>
      </view>
      <scroll-view scroll-y="true" class="more-content">
        <view v-for="(item,index) in cardServiceList" :key="index">
          <view class="second-title">{{ item.groupName }}</view>
          <view class="pre-send-card" v-for="(_item,_index) in item.productList" :key="_index"
            @click="addOrRemoveOneService(_item)">
            <view class="left-image"></view>
            <view class="right-info">
              <span class="right-info-title">{{ _item.productName }}</span>
              <span class="desc">{{ _item.productDesc }}</span>
              <view class="price-info">
                <span class="current-price">￥{{ _item.price }}</span>
                <view class="original-price">￥{{ _item.originPrice }}
                  <view class="red-line"></view>
                </view>
                <view class="falsh-sales">限时特惠</view>
              </view>
              <view class="choose-button" v-if="_item.isChoosen == false"></view>
              <view class="choose-sth" v-else></view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="footer">
        <view class="footer-left">已选<span>{{ choosenNum }}</span>个</view>
        <view class="confirm-button" @click="confirmSendCard">确定</view>
      </view>
    </u-popup>
  </page-wrap>
</template>

<script>
import { msgTypeList } from "@/utils/data";
import { formatTime, formatTimeFlex } from "@/utils/handle";
import {
  getUserRawInfo,
  getMsgList,
  uploadAction,
  registerUser,
  getPersonAppointmentInfo,
  getConsultantTimeList,
} from "@/api/index";
import { reportImLog } from "@/api/modules/message.js";
import {
  getUserInfo,
  getPersonChatFlow,
  addPersonChatFlow,
  getVasRights,
  getPersonOneLevelRightList,
  getProductGroup,
} from "@/api/modules/career";
import IMEventHandler from "@/utils/im";
import MyTextarea from "../components/MyTextarea.vue";
import chatTools from "./components/chatTools.vue";
import myRightsBottomPopup from "./components/myRightsBottomPopup.vue";
import myRightsBottomPopupForUser from "./components/myRightsBottomPopupForUser.vue";
import zhituServiceCardwithProgress from "./components/cards/zhituServiceCardwithProgress.vue";
import zhituServiceResultCard from "./components/cards/zhituServiceResultCard.vue";
import zhituRateCard from "./components/cards/zhituRateCard.vue";
import marketingCard from "./components/cards/marketingCard.vue";
import overdueCard from "./components/cards/overdueCard.vue";
import nonarrivalCard from "./components/cards/nonarrivalCard.vue";
import interviewCoachingCard from "./components/cards/interviewCoachingCard.vue";
import resumeOptimizationCard from "./components/cards/resumeOptimizationCard.vue";
import rightTimeCard from "./components/cards/rightTimeCard.vue";

import MD5 from "@/utils/md5.js";

export default {
  components: {
    // 不要用懒加载 不然会出问题
    MyTextarea,
    zhituServiceCardwithProgress,
    zhituServiceResultCard,
    zhituRateCard,
    marketingCard,
    overdueCard,
    nonarrivalCard,
    interviewCoachingCard,
    resumeOptimizationCard,
    rightTimeCard,
    myRightsBottomPopup,
    myRightsBottomPopupForUser,
    chatTools,
  },
  data() {
    return {
      wechatQrcode: "", //顾问的企业微信二维码
      projectName: "",
      cardServiceList: [], // 渲染权益卡片
      choosenNum: 0, // 已选择个数
      showMoreCard: false, // 展示发送卡片弹出层
      isBuy: 0, // 判断是否购买
      showConsutlantName: "",
      inTimeScope: false,
      editionType: 10, // 判断当前聊天的人才是否是体验版10正常版20体验版
      haveAppointment: false,
      timeList: [],
      selecetedDay: 0,
      nextSevenDays: [],
      showPopup: false,
      bookTime: "2024-02-04 09:00-09:30", // 预约的咨询时间
      consultantAvatar: this.$imgBase + "careerPath/consultantAvatar.png",
      bookLogo: this.$imgBase + "careerPath/bookLogo.png",
      activeIndex: 1, // 判断当前咨询状态进行到哪一步
      consultState: ["收集问题", "咨询辅导", "结束咨询"],
      isChatToolsShow: false,
      defaultAvatar: this.$imgBase + "common/avatar_default.png",
      file: this.$imgBase + "career/chatService/file.png",
      img: this.$imgBase + "career/chatService/img.png",
      chatResult: this.$imgBase + "career/chatResult.png",
      chatRightProgress: this.$imgBase + "career/chatRightProgress.png",
      goBack: this.$imgBase + "career/chatService/back.png",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      loginStatus: uni.getStorageSync("login-status") || "person",
      chatId: "",
      conversationID: "",
      msgTypeList,
      oppInfo: {
        name: "",
        avatar: "",
      },
      selfInfo: getApp().globalData.imInfo,
      chatList: [],
      isInit: true,
      firstMsgTime: "0000-00-00 00:00:00",
      pageParam: {
        page: 0,
        pageSize: 20,
      },
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      curMsgTime: 0,
      tips: getApp().globalData.chatTips,
      sendText: "",
      scrollTo: 0,
      showPlaceholder: true,
      showClear: false,
      inputFocus: false,
      inputBottom: 0,
      moreSendVisible: false,
      toLast: "",
      oppChatList: [], //对方的聊天记录列表，用于处理未读已读状态
      showServiceEva: false,
      currentService: {},
      isIOS: uni.getSystemInfoSync().platform == "ios",
      personType: 0,
      showRole: false, // 是否显示顾问信息
      isReconnect: false,
      //新聊天的
      isZhituUser: false,
      panelBtnList: [
        { title: "职业测评" },
        { title: "简历诊断" },
        { title: "AI面试" },
      ],
      consultantInfo: {}, //职途2.0用来存顾问信息的，要从职途页面或者顾问大厅页面带过来！
      disablePanelButtonClick: false,
      inputBottomUsual: "24",
      confirmType: "done",
      isFirstInit: true,
      hansRealChat: false,
      preSendCards: [
        {
          productName: "简历优化",
          productDesc: "阿卡得较好的",
          originPrice: 1000,
          price: 999,
          isChoosen: false,
        },
        {
          productName: "面试辅导",
          productDesc: "阿卡得较好的",
          originPrice: 1000,
          price: 999,
          isChoosen: false,
        },
      ],
    };
  },
  computed: {
    // 是否人企沟通
    isConsultant() {
      return getApp().globalData.loginStatus == "consultant";
    },
    chatRoles() {
      return getApp().globalData.loginStatus == "consultant" ? "10" : "20";
    },
  },
  watch: {
    hansRealChat(val) {
      if (val) {
        // console.log("正式聊天状态变化了", val);
      }
    },
    inputFocus(val) {
      if (val) {
        this.moreSendVisible = false;
      }
    },
    sendText(newValue, oldValue) {
      if (newValue) {
        this.confirmType = "send";
      } else {
        this.confirmType = "done";
      }
    },
    chatList: {
      handler(newVal, oldVal) {},
    },
  },
  onShow() {
    //如果把微信切到后台之后，会造成极光无法接收新消息，这里试着处理一下
    uni.showToast({
      icon: "none",
      title: getApp().globalData.tim.isConnect(),
    });
  },
  onLoad(opt) {
    // console.log("opt", opt);
    //如果要修改这个页面生命周期的东西，要考虑清楚生命周期的执行顺序
    this.chatId = opt.chatId;
    this.conversationID = opt.conversationID;
    this.isZhituUser = opt.isZhituUser;
    // console.log("newchat opt", opt);

    //从职途页面或者顾问大厅页面toChat方法会存带过来的顾问信息
    if (this.isZhituUser) {
      uni.setStorageSync("consultantId", this.chatId); //！！！后端只能存bigInt所以和后端交互要去掉后缀！！！
      this.consultantInfo = uni.getStorageSync("consultantInfo");
    }
    // 如果当前的登陆人是顾问，就去请求卡片服务
    //如果是个人登录的时候，手动设置聊天对象的信息为顾问
    // console.log("!this.isConsultant", !this.isConsultant);

    if (!this.isConsultant) {
      this.setChatOpp();
    } else {
      this.getChatOpp();
    }
    //必须要这个获取到isZhituuser之后才能让chattools组件初始化
    this.isChatToolsShow = true;
    this.getNextWeek();
    this.currentDate = this.nextSevenDays[0].fullDay;
  },
  created() {
    this.$bus.$on("RECEIVE_CHATING_MESSAGE", (data) => {
      if (this.chatId == data.account) {
        this.handleChatInit();
      }
    });
    this.$bus.$on("LOGIN_SUCCESS", () => {
      uni.hideLoading();
      this.getChatOpp();
      this.handleChatInit();
    });
    this.$bus.$on("MSG_RECEIPT_CHANGE", (data) => {
      // console.log("data && !data.receipt_msgs", data, data.receipt_msgs);

      if (data && !data.receipt_msgs) return;
      // 收到对方已读消息
      for (let i = 0; i < data.receipt_msgs.length; i++) {
        let unreadItem = data.receipt_msgs[i];
        let messageList = getApp().globalData.messageList || [];
        messageList.forEach((ele) => {
          if (ele.from_username == this.chatId) {
            if (!ele.receipt_msgs) ele.receipt_msgs = [];
            ele.receipt_msgs.push(unreadItem);
          }
        });
        for (let k = this.chatList.length - 1; k > -1; k--) {
          if (this.chatList[k].msg_id == unreadItem.msg_id) {
            this.chatList[k].unreadCount = 0;
            break;
          }
        }
      }
      this.$bus.$emit("NEED_UPDATE_CONVERSATION");
    });
    //如果是IOS，需要把输入框paddingBottom调高一点
    if (this.isIOS) {
      this.inputBottomUsual = "58";
    }
    this.getPanelBtnList();
    // this.getPersonOneLevelRightListFn();
  },
  beforeDestroy() {
    this.$bus.$off("RECEIVE_CHATING_MESSAGE");
    this.$bus.$off("LOGIN_SUCCESS");
    this.$bus.$off("MSG_RECEIPT_CHANGE");
    this.handleResetNum();
  },
  mounted() {
    // console.log(this.selfInfo, "this.selfInfo-----");
    this.handleChatInit();
    this.getPersonChatFlow();
    this.getPersonAppointmentInfo();
    this.getVasRights();
  },
  onHide() {
    this.$bus.$on("RECEIVE_CHATING_MESSAGE", (data) => {
      if (this.chatId == data.account) {
        this.handleChatInit();
      }
    });
    this.$bus.$on("LOGIN_SUCCESS", () => {
      uni.hideLoading();
      this.getChatOpp();
      this.handleChatInit();
    });
    //如果是IOS，需要把输入框paddingBottom调高一点
    if (this.isIOS) {
      this.inputBottomUsual = "58";
    }
  },
  methods: {
    async getProductGroup() {
      const params = {
        personId: this.chatId,
        id: "1",
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        this.projectName = res.data[0].productSign;
        // console.log("this.projectName", this.projectName);
        this.cardServiceList = res.data;
        this.cardServiceList.forEach((item) => {
          item.productList.forEach((_item) => {
            _item.isChoosen = false;
          });
        });
      }
    },
    confirmSendCard() {
      this.cardServiceList.forEach((item) => {
        item.productList.forEach((_item) => {
          if (_item.isChoosen == true) {
            switch (_item.productName) {
              // 在这里要写出所有的卡片类型 发送对应的卡片
              // 根据接口获取渲染不同的preSendCards
              case "简历优化":
                this.createMsgContent({
                  send_uid: this.selfInfo.uname,
                  receive_uid: this.chatId,
                  content: "权益卡片",
                  share: {
                    type: 209,
                    isBuy: _item.isBuy,
                  },
                  is_send: "1",
                  idate: new Date().getTime(),
                });
                break;
              case "面试辅导":
                this.createMsgContent({
                  send_uid: this.selfInfo.uname,
                  receive_uid: this.chatId,
                  content: "权益卡片",
                  share: {
                    type: 210,
                    isBuy: _item.isBuy,
                  },
                  is_send: "1",
                  idate: new Date().getTime(),
                });
                break;
              case "职途顾问服务":
                this.createMsgContent({
                  send_uid: this.selfInfo.uname,
                  receive_uid: this.chatId,
                  content: "权益卡片",
                  share: {
                    type: 205,
                  },
                  is_send: "1",
                  idate: new Date().getTime(),
                });
                break;
              default:
                break;
            }
          }
        });
      });
      this.showMoreCard = false;
    },
    addOrRemoveOneService(item) {
      if (item.isChoosen == false) {
        item.isChoosen = true;
        this.choosenNum += 1;
      } else {
        item.isChoosen = false;
        this.choosenNum -= 1;
      }
    },
    async getVasRights() {
      const cardType = uni.getStorageSync("cardType") || "";
      if (cardType) {
        const params = {
          cardType,
          personId: this.isConsultant
            ? this.chatId
            : uni.getStorageSync("person-id").slice(2),
        };
        const res = await getVasRights(params);
        if (res.code == 200) {
          if (res.data.CONSULTE_SERVICE) {
            this.consultantService = true;
            this.isBuy = res.data.CONSULTE_SERVICE.isBuy;
          } else {
            this.isBuy = 1;
            this.editionType = 10;
            uni.setStorageSync("isBuy", 1);
            uni.setStorageSync("edition-Type", 10);
          }
        }
      }
    },
    closePopup() {
      this.showPopup = false;
    },
    gotoBookDetail() {
      // 不是顾问才可以跳转到预约详情
      if (!this.isConsultant) {
        uni.navigateTo({
          url:
            "/pagesSub/userCenter/careerPathV2/components/BookInfoConfirm?isCheck=ture&&isOverdue=false&&cancelavailable=" +
            !this.inTimeScope,
        });
      } else {
        uni.navigateTo({
          url:
            "/pagesSub/userCenter/careerPathV2/components/BookInfoConfirm?isCheck=ture&&isOverdue=true&&cancelavailable=false&&personId=" +
            this.chatId.replace(/_.*/, ""),
        });
      }
    },
    async getConsultantTimeList(matchStartTime, matchEndTime) {
      const params = {
        // consultantId: parseInt(this.personId) || parseInt("123456"),
        consultantId: this.chatId ? this.chatId.replace(/_.*/, "") : undefined,
        matchStartTime: matchStartTime,
        matchEndTime: matchEndTime,
        searchDetail: true,
      };
      const res = await getConsultantTimeList(params);
      if (res.code === 200) {
        // 计算23h59min59s的时间戳是多少ms 去比较这个时间
        if (
          new Date(matchEndTime).getTime() -
            new Date(matchStartTime).getTime() >
          86399000
        ) {
          res.data.forEach((item, index) => {
            this.nextSevenDays[index].available = item.appointmentStatus;
          });
        }
        if (res.data) {
          this.timeList = res.data[0].hourScheduleList;
          let nowDateStamp = new Date().getTime();
          this.timeList.forEach((item) => {
            let startDateStamp = new Date(item.startTime).getTime();
            if (nowDateStamp >= startDateStamp) {
              item.canAppointmentNumber = 0;
            }
            item.showTimeScopeStart =
              item.startTime && item.startTime.slice(11, 16);
            item.showTimeScopeEnd = item.endTime && item.endTime.slice(11, 16);
          });
        }
      }
    },
    bookConsultant(item) {
      if (item.canAppointmentNumber > 0) {
        uni.navigateTo({
          url:
            "/pagesSub/userCenter/careerPathV2/components/BookInfoConfirm?info=" +
            JSON.stringify(item),
        });
      } else {
        uni.showToast({
          title: "当前时间段无法预约",
          icon: "none",
          duration: 1000,
        });
      }
    },
    getNextWeek() {
      const days = 7; // 近7天
      const week = ["日", "一", "二", "三", "四", "五", "六"]; // 星期

      const dateList = Array.from({ length: days }, (v, i) => i).map((day) => {
        const date = new Date();
        date.setDate(date.getDate() + day);
        let tempMonth = Number(date.getMonth()) + 1;
        let tempDay = date.getDate();
        if (tempMonth < 10) {
          tempMonth = "0" + tempMonth;
        }
        if (tempDay < 10) {
          tempDay = "0" + tempDay;
        }
        // console.log("tempDay", tempDay);
        return {
          day: tempMonth + "-" + tempDay,
          weekDay: "周" + week[date.getDay()],
          fullDay: date.getFullYear() + "-" + tempMonth + "-" + tempDay,
        };
      });
      this.nextSevenDays = dateList;
      this.getConsultantTimeList(
        this.nextSevenDays[0].fullDay + " " + "00:00:00",
        this.nextSevenDays[6].fullDay + " " + "23:59:59"
      );
      // 10可预约 30约满 40放假
      // this.nextSevenDays.forEach((item) => {
      //   item.available = 10;
      // });
    },
    changeselecetedDay(item, index) {
      this.selecetedDay = index;
      this.currentDate = item.fullDay;
      this.getConsultantTimeList(
        this.currentDate + " " + "00:00:00",
        this.currentDate + " " + "23:59:59"
      );
    },
    showMyPopup() {
      this.showPopup = true;
    },
    async getPersonAppointmentInfo() {
      const params = {
        personId: this.isConsultant
          ? this.chatId
          : uni.getStorageSync("person-id").slice(2),
        conultantId: this.isConsultant
          ? uni.getStorageSync("person-id").slice(2)
          : this.chatId,
        searchPersonInfo: true,
      };
      const res = await getPersonAppointmentInfo(params);
      if (res.code === 200) {
        this.showConsutlantName = res.data.consultantName;
        this.sendSystemMsg();
        // console.log("this.showConsutlantName", this.showConsutlantName);
        if (res.data.startTime) {
          // this.haveAppointment = true;
          this.bookTime =
            res.data.startTime.slice(0, 16) +
            "-" +
            res.data.endTime.slice(11, 16);
          let nowDate = new Date(); // 当前时间
          let startTime = new Date(res.data.startTime).getTime();
          let endTime = new Date(res.data.endTime).getTime();
          let nowDatestamp = nowDate.getTime();
          if (nowDatestamp < startTime) {
            // 说明此时还未到预约时间
            this.inTimeScope = false;
            this.haveAppointment = true;
            // console.log("此时还未到预约时间");
          }
          if (nowDatestamp > endTime) {
            // 说明此时已经超时
            this.haveAppointment = false;
            this.inTimeScope = false;
            // console.log("此时已经超时");
            // this.sendSystemMsg();
          }
          if (nowDatestamp >= startTime && nowDatestamp <= endTime) {
            this.inTimeScope = true;
            this.haveAppointment = true;
            // console.log("此时正在预约时间内");
            // this.getPersonOneLevelRightListFn();
          }
          if (this.inTimeScope == false) {
            this.sendOverdueCard(); // 在这里把咨询体验时间过了当做一张中立卡片放到聊天记录里
          }
        } else {
          this.haveAppointment = false;
          this.bookTime = "";
        }
        // 控制显示隐藏在子组件内部做
        // 206 过期 207 时间未到
        if (this.inTimeScope == false && this.haveAppointment == true) {
          this.sendNonarrivalCard(); // 在这里把咨询体验时间没有到当做一张中立卡片放到聊天记录里
        }
      }
    },
    async getPanelBtnList() {
      const params = {
        personId: this.personId,
      };
      const res = await getPersonOneLevelRightList(params);
      if (res.code == 200) {
        this.panelBtnList = res.data;
      }
    },
    sendSystemMsg() {
      // console.log("这里调用了sendSystemMsg");
      if (this.isConsultant) return;
      setTimeout(() => {
        this.setSystemMsg(
          `Hi，我是${this.consultantInfo.iname}，很高兴为您服务，如果您需要关于简历诊断、面试技巧或者其他职业咨询方面的帮助，请告诉我~`
        );
        this.$nextTick(() => {
          this.setSystemMsg("您可能想咨询以下内容？", true);
        });
        this.$nextTick(() => {
          this.sendWechatWorkPic(this.wechatQrcode);
        });
      }, 1000);
    },
    //此方法已弃用
    getPersonOneLevelRightListFn() {
      //判断是否是第一次
      if (!this.isFirstInit) return;
      // 这个uid只是作为占位，但是不能删除。
      getPersonOneLevelRightList({ personId: this.personId }).then((res) => {
        if (res.code == 200) {
          this.panelBtnList = res.data;
          //判断如果聊天记录的长度是0或者最后一条消息类型是评分信息
          if (
            this.chatList.length == 0 ||
            (this.chatList[this.chatList.length - 1].contentParse &&
              this.chatList[this.chatList.length - 1].contentParse.content ==
                "本次咨询服务已完成，请为我评分！")
          ) {
            if (this.isConsultant) return;
            this.setSystemMsg(
              `Hi，我是${this.consultantInfo.iname}，很高兴为您服务，如果您需要关于简历诊断、面试技巧或者其他职业咨询方面的帮助，请告诉我~`
            );
            this.$nextTick(() => {
              this.setSystemMsg("您可能想咨询以下内容？", true);
            });
          }

          this.isFirstInit = false;
        }
      });
    },
    async addPersonChatFlow(scheduleType) {
      if (this.isConsultant) {
        const params = {
          consultantId: this.personId ? this.personId : "123456",
          personId: this.chatId ? this.chatId : "7846546",
          scheduleType: scheduleType,
        };
        const res = await addPersonChatFlow(params);
        if (res.code === 200) {
          // console.log("res", res.status_desc);
        }
      } else {
        const params = {
          consultantId: this.chatId
            ? this.chatId.slice(0, this.chatId.length - 11)
            : "123456",
          personId: this.personId ? this.personId : "7846546",
          scheduleType: scheduleType,
        };
        const res = await addPersonChatFlow(params);
        if (res.code === 200) {
          // console.log("res", res.status_desc);
        }
      }
    },
    //获取咨询状态进度
    async getPersonChatFlow() {
      if (this.isConsultant) {
        const params = {
          consultantId: this.personId ? this.personId : "123456",
          personId: this.chatId ? this.chatId : "7846546",
          chatRoles: this.chatRoles,
        };
        const res = await getPersonChatFlow(params);
        if (res.code == 200) {
          if (res.data) {
            if (res.data.editionType) {
              this.editionType = res.data.editionType;
              uni.setStorageSync("edition-Type", this.editionType);
            }
            switch (res.data.scheduleType) {
              case 10:
                this.activeIndex = 0;
                break;
              case 20:
                this.activeIndex = 1;
                break;
              case 30:
                this.activeIndex = 2;
                break;
              default:
                this.activeIndex = 0;
                break;
            }
          } else {
            this.activeIndex = 0;
          }
        }
      } else {
        const params = {
          consultantId: this.chatId
            ? this.chatId.slice(0, this.chatId.length - 11)
            : "",
          personId: this.personId ? this.personId : "",
        };
        const res = await getPersonChatFlow(params);
        if (res.code === 200) {
          if (res.data) {
            this.wechatQrcode = res.data.wechatQrcode;
            console.log(
              "11111111111111111111111111111111this.wechatQrcode",
              this.wechatQrcode
            );
            if (res.data.editionType) {
              this.editionType = res.data.editionType;
              uni.setStorageSync("edition-Type", this.editionType);
            }
            switch (res.data.scheduleType) {
              case 10:
                this.activeIndex = 0;
                break;
              case 20:
                this.activeIndex = 1;
                break;
              case 30:
                this.activeIndex = 2;
                break;
              default:
                this.activeIndex = 0;
                break;
            }
          } else {
            this.activeIndex = 0;
          }
        }
      }
    },
    //点击顾问自动发送的面板后，用户发送消息
    handlePanelButtonClick(item) {
      if (this.disablePanelButtonClick) {
        uni.showToast({ icon: "none", title: "请勿频繁点击", duration: 1000 });
        return;
      }
      this.disablePanelButtonClick = true;
      setTimeout(() => {
        this.disablePanelButtonClick = false;
      }, 1000);

      this.sendText = `我想咨询下${item.rightName || item.title}的问题`;

      this.handleSendMsg();
    },
    openRightsBox() {
      if (this.isConsultant) {
        this.$refs.myRightsBottomPopup.init();
      } else {
        this.$refs.myRightsBottomPopupForUser.init();
      }
    },
    sendOverdueCard() {
      // console.log("这里发送了过期卡片");
      if (
        this.chatList.length &&
        this.chatList[this.chatList.length - 1].contentParse.share &&
        this.chatList[this.chatList.length - 1].contentParse.share.type == 206
      ) {
        // console.log("这里由于上一条已经展示了过期卡片所以这里不做发送");
        return;
      } else if (!this.haveAppointment && !this.inTimeScope) {
        this.createMsgContent({
          send_uid: this.selfInfo.uname,
          receive_uid: this.chatId,
          content: "权益卡片",
          share: {
            type: 206,
          },
          is_send: "1",
          idate: new Date().getTime(),
        });
        // console.log("this.chatList", this.chatList);
        // console.log("这里成功发送了过期卡片");
      }
    },
    sendNonarrivalCard() {
      // console.log(
      //   "这里发送了时间还未到卡片",
      //   this.haveAppointment,
      //   !this.inTimeScope
      // );
      if (
        this.chatList.length &&
        this.chatList[this.chatList.length - 1].contentParse.share &&
        this.chatList[this.chatList.length - 1].contentParse.share.type == 207
      ) {
        // console.log("这里由于上一条已经展示了时间未到卡片所以这里不做发送");
        return;
      } else if (this.haveAppointment && !this.inTimeScope) {
        this.createMsgContent({
          send_uid: this.selfInfo.uname,
          receive_uid: this.chatId,
          content: "权益卡片",
          share: {
            type: 207,
          },
          is_send: "1",
          idate: new Date().getTime(),
        });
        // console.log("这里成功发送了时间还未到卡片");
      }
    },
    showMoreCardPopup() {
      this.getProductGroup();
      this.choosenNum = 0;
      this.showMoreCard = true;
      // 每次点开弹出层都重置选择状态
      this.preSendCards.forEach((item) => {
        item.isChoosen = false;
      });
    },
    sendMarketingCard() {
      // console.log("这里点击了权益营销页");
      this.createMsgContent({
        send_uid: this.selfInfo.uname,
        receive_uid: this.chatId,
        content: "权益卡片",
        share: {
          type: 205,
        },
        is_send: "1",
        idate: new Date().getTime(),
      });
    },
    //获取对方的信息 啊啊啊啊啊啊
    getChatOpp() {
      let extras = {};
      let conversationList = getApp().globalData.conversationList;
      let item = conversationList.find((ele) => ele.username == this.chatId);
      item && (extras = item.extras);

      let that = this;
      // 如果当前登陆人是顾问，就用自己的personId去请求信息，如果是用户，就用chatId请求
      // 但如果是本身登陆人对顾问，在职途卡绑定了顾问账号，就会出现聊天页面顶部title和头像都是自己的问题
      let param = {
        // uname: getApp().globalData.userIsConsultant
        //   ? this.personId
        //   : this.chatId,
        uname: this.chatId,
      };
      getUserRawInfo(param).then((res) => {
        // console.log("getChatOpp res", res);

        this.oppInfo.name = res.info.iname_forshow || res.info.iname_real;
        this.oppInfo.avatar = res.info.pic;
        uni.setNavigationBarTitle({
          title: that.oppInfo.name,
        });
      });
    },
    handleClickAvatar(item) {
      // 2、当fromId有consultant的时候，就是顾问，去掉_consultant后缀之后跳转到顾问详情
      // 3、当fromId没有consultant的时候，就是用户，跳转到用户详情
      // console.log("点击了头像！", item);
      if (item.content.from_id.indexOf("consultant") != -1) {
        uni.navigateTo({
          url: `/pagesSub/career/consultant/consultantDetail/index?personId=${item.content.from_id.replace(
            "_consultant",
            ""
          )}`,
        });
      } else {
        uni.navigateTo({
          url: `/pagesSub/career/consultant/userDetail/index?personId=${item.content.from_id}`,
        });
      }
    },
    setChatOpp() {
      // console.log("对方是顾问，而且this.consultantInfo", this.consultantInfo);

      this.oppInfo.name = this.consultantInfo.iname;
      this.oppInfo.avatar = this.consultantInfo.pic || this.consultantAvatar;
    },
    // 初始状态下，发送固定的系统消息，不会存到极光聊天记录里,
    setSystemMsg(msg, isPanel, type = 1) {
      // console.log("这里点击了常见问题");
      const obj = {
        ctime_ms: new Date().getTime(),
        timeParse: formatTimeFlex(new Date(), 1),
        showTime: true,
        msg_id: new Date().getTime(),
        type: type,
        content: {
          from_id: this.chatId,
        },
        contentParse: {
          type: type,
          content:
            msg ||
            "Hi，我是职业顾问，很高兴为您服务，如果您需要关于简历诊断、面试技巧或者其他职业咨询方面的帮助，请告诉我~",
        },
      };
      if (isPanel) {
        obj.contentParse.type = 203;
        obj.contentParse.share = { type: 203 };
      }
      this.chatList.push(obj);
      this.toBottom();
    },
    //获取聊天记录
    getChatList(toBtm) {
      this.moreLoading = "loading";
      let param = {
        condition_arr: JSON.stringify({
          send_uid: getApp().globalData.imInfo.uname,
          receive_uid: this.chatId,
          listtype: "pageList",
          pageindex: this.pageParam.page,
          person_status: 1,
          search_until: this.firstMsgTime,
        }),
      };
      getMsgList(param).then((res) => {
        this.moreLoading = "loadmore";
        let haveMore = !res.data || !res.data.length;

        if (haveMore) {
          this.moreLoading = "nomore";
          return false;
          // return uni.showToast({
          //   icon: "none",
          //   title: "没有更多记录",
          // });
        }
        let historyMsg = res.data.reverse().map((item) => {
          return {
            ctime_ms: new Date(item.idate).getTime(),
            timeParse: formatTimeFlex(new Date(item.idate), 1),
            msg_id: item.pmsg_id,
            type: item.type,
            content: {
              from_id: +item.is_send
                ? getApp().globalData.imInfo.uname
                : this.chatId,
            },
            contentParse: {
              type: item.type,
              content: item.content,
              share: item._share_info,
            },
          };
        });
        let chatList = historyMsg.concat(this.chatList);
        this.chatList = chatList.map((ele) => {
          ele.showTime = this.handleShowTime(ele.ctime_ms);
          let receiptMsgs = ele.receipt_msgs || [];
          for (let i = 0; i < receiptMsgs.length; i++) {
            if (ele.msg_id == receiptMsgs[i].msg_id) {
              ele.unreadCount = receiptMsgs[i].unread_count;
              break;
            }
          }
          if (this.chatId === ele.content.from_id) {
            this.oppChatList.push(ele);
          }
          return ele;
        });

        //能收到信息or聊天记录就是有正式聊天过了
        if (this.chatList) {
          this.hansRealChat = !!this.chatList.length;
        } else {
          this.hansRealChat = false;
        }
        // console.log("this.hansRealChat", this.hansRealChat);
        this.firstMsgTime = formatTime(
          +this.chatList[0].ctime_ms - 500,
          "yyyy-MM-dd HH:mm:ss"
        );
        if (toBtm) {
          this.toBottom();
        }

        this.handleReceiptReport();
      });
    },
    //接受信息的时候触发的方法，也有一些初始化的逻辑
    handleChatInit() {
      this.oppChatList = [];
      let chatList = getApp().globalData.messageList.filter(
        (ele) => ele.from_username == this.chatId
      );
      if (chatList.length) {
        this.firstMsgTime = formatTime(
          +chatList[0].msgs[0].ctime_ms - 500,
          "yyyy-MM-dd HH:mm:ss"
        );
        let receiptMsgs = chatList[0].receipt_msgs || [];
        chatList = chatList[0].msgs.map((ele) => {
          ele.contentParse = {
            type: 0,
            share: {},
          };
          if (ele.content.msg_body.text) {
            try {
              ele.contentParse = JSON.parse(ele.content.msg_body.text);
            } catch (e) {
              ele.contentParse = {
                type: 1,
                content: ele.content.msg_body.text,
              };
            }
          }
          for (let i = 0; i < receiptMsgs.length; i++) {
            if (ele.msg_id == receiptMsgs[i].msg_id) {
              ele.unreadCount = receiptMsgs[i].unread_count;
              break;
            }
          }
          if (/^\d+$/.test(ele.contentParse.idate)) {
            ele.contentParse.idate = +ele.contentParse.idate;
          }
          ele.idateStr = formatTime(ele.contentParse.idate, "MM-dd HH:mm");
          ele.timeParse = formatTimeFlex(ele.ctime_ms, 1);
          ele.showTime = this.handleShowTime(+ele.ctime_ms);

          if (this.chatId === ele.content.from_id) {
            this.oppChatList.push(ele);
          }

          return ele;
        });
      }
      this.chatList = chatList;
      console.log("this.chatList", this.chatList);
      // 206 过期 207 时间未到
      // this.sendOverdueCard(); // 在这里把咨询体验时间过了当做一张中立卡片放到聊天记录里
      // this.sendNonarrivalCard(); // 在这里把咨询体验时间没有到当做一张中立卡片放到聊天记录里
      //能收到信息or聊天记录就是有正式聊天过了
      if (this.chatList) {
        this.hansRealChat = !!this.chatList.length;
      } else {
        this.hansRealChat = false;
      }
      // console.log("this.hansRealChat", this.hansRealChat);

      this.handleReceiptReport();
      //初次加载自动拉取一次历史记录
      if (this.isInit && this.chatList.length < 10) {
        this.handleMore(true);
        this.isInit = false;
      }
      if (this.toLast != `item${this.chatList.length}`) {
        this.toBottom();
      }
      // 这里暂时注释掉因为不让自动发消息，要有预约且在预约时间内才能自动发送消息
      // 此函数改在getPersonAppointmentInfo内部调用了
      // this.getPersonOneLevelRightListFn();
    },
    // 重置会话未读数 https://community.jiguang.cn/question/299550?fs=1
    handleResetNum() {
      let chat = getApp().globalData.tim;
     // 将某会话下所有未读消息已读上报
      let promise = chat.setMessageRead({conversationID: this.conversationID});
      promise.then(function(imResponse) {
        // 已读上报成功，指定 ID 的会话的 unreadCount 属性值被置为0
      }).catch(function(imError) {
        // 已读上报失败
        console.warn('setMessageRead error:', imError);
      });
      this.$bus.$emit("NEED_UPDATE_CONVERSATION");
    },
    handleMore(toBtm) {
      let isToBottom = false;
      if (typeof toBtm == "boolean") {
        isToBottom = true;
      }
      this.$set(this.pageParam, "page", this.pageParam.page + 1);
      this.getChatList(isToBottom);
    },
    handleShowTime(time) {
      let timeDiff = time - this.curMsgTime;
      if (timeDiff >= 5 * 60 * 1000 || timeDiff <= 0) {
        this.curMsgTime = time;
      }
      return timeDiff >= 5 * 60 * 1000 || timeDiff <= 0;
    },
    //创建消息体并发送
    createMsgContent(content) {
      // console.log("createMsgContent", content);

      const that = this;
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        if (this.isReconnect) return;
        this.isReconnect = true;
        new IMEventHandler(() => {
          uni.hideLoading();
          that.isReconnect = false;
          that.creatMsgContent(content);
        });
        return uni.showLoading({
          title: "正在连接",
          mask: true,
        });
      }
      if (!content) {
        return uni.showToast({
          icon: "none",
          title: "发送内容不能为空",
        });
      }

      content = JSON.stringify(content);
      let _self = this;
      const params = {
        target_username: this.chatId,
        content: content,
        no_offline: false,
        no_notification: false,
        custom_notification: {
          enabled: true,
          title: this.selfInfo.nickname,
          alert: JSON.parse(content).content,
        },
        need_receipt: true,
      };
      // console.log("createMsgContent params", params);

      getApp()
        .globalData.tim.sendSingleMsg(params)
        .onSuccess(function (data, msg) {
          console.log("发送信息成功，", data, msg);

          _self.hansRealChat = true;
          _self.handleSendMsgSuccess(data, msg);
        })
        .onFail((data) => {
          console.log("发送信息失败，", data);
          switch (data.code) {
            case 880207:
              uni.showToast({
                title: "发送消息失败，已被对方拉入黑名单!",
                icon: "none",
              });
              break;
            case 880103:
              _self.register(_self.chatId);
              break;
            default:
              uni.showToast({
                icon: "none",
                title: "消息发送失败",
              });
              _self.reportImLog({
                data,
                params: params,
                selfinfo: _self.selfInfo,
                source: "mp",
              });
              break;
          }
        });
    },
    // 发送文本消息
    handleSendMsg() {
      this.sendSingleTextMsg(this.sendText);

      // this.sendText = ''
    },
    // 发送单聊文本消息
    sendSingleTextMsg(text) {
      var idate = new Date().getTime();
      let msg = {
        send_uid: this.selfInfo.uname,
        receive_uid: this.chatId,
        content: text,
        person_iname: this.selfInfo.nickname,
        person_pic: this.selfInfo.pic,
        is_send: "1",
        idate: idate,
        type: 1,
      };

      // console.log("sendSingleTextMsg", msg);
      this.createMsgContent(msg);
    },
    // 成功发送消息处理
    handleSendMsgSuccess(data, msg) {
      this.sendText = "";
      this.handleLinechange({ lineCount: 0 });
      msg.ctime_ms = data.ctime_ms;
      let msgList = getApp().globalData.messageList.filter(
        (ele) => ele.from_username == this.chatId
      );
      if (!msgList.length) {
        let msgItem = {
          from_username: msg.target_name,
          msgs: [msg],
        };
        getApp().globalData.messageList.push(msgItem);
      } else {
        msgList[0].msgs.push(msg);
      }
      this.chatList.push({
        ...msg,
        contentParse: JSON.parse(msg.content.msg_body.text),
        timeParse: formatTimeFlex(msg.ctime_ms, 1),
        showTime: this.handleShowTime(+msg.ctime_ms),
        unreadCount: 1,
      });
      let latestMsg = this.chatList[this.chatList.length - 1];
      switch (
        latestMsg.contentParse.share &&
        latestMsg.contentParse.share.type
      ) {
        // 每次修改过后重新调用一下查询接口
        case 201:
          this.addPersonChatFlow("20");
          this.getPersonChatFlow();

          break;
        case 202:
          this.addPersonChatFlow("20");
          this.getPersonChatFlow();

          break;
        case 204:
          this.addPersonChatFlow("30");
          this.getPersonChatFlow();

          break;
        default:
          break;
      }
      this.toBottom();
    },
    // 选择图片
    handleSendPic() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          var tempFilePaths = res.tempFilePaths[0]; //获取成功，读取文件路径

          uni.uploadFile({
            url: uploadAction,
            filePath: tempFilePaths,
            name: "file",
            success: (fileRes) => {
              if (fileRes.data) {
                let imgPath = "https://img106.job1001.com/" + fileRes.data;
                imgPath = imgPath + "#" + imgPath; // App特殊格式
                this.sendPic(imgPath);
              }
            },
            fail: (err) => {
              uni.showToast({
                icon: "none",
                title: "图片发送失败",
              });
            },
          });
        },
      });
    },
    // 发送图片
    sendPic(imgSrc) {
      let content = {
        send_uid: this.selfInfo.uname,
        receive_uid: this.chatId,
        content: "图片",
        share: {
          type: 4,
          slave: {
            path: imgSrc,
          },
        },
        person_iname: this.selfInfo.nickname,
        person_pic: this.selfInfo.pic,
        is_send: "1",
        idate: new Date().getTime(),
      };
      this.createMsgContent(content);
    },
    // 顾问给用户发送二维码图片
    sendWechatWorkPic(imgSrc) {
      if (!imgSrc) return;
      const obj = {
        ctime_ms: new Date().getTime(),
        timeParse: formatTimeFlex(new Date(), 1),
        showTime: true,
        msg_id: new Date().getTime(),
        type: 4,
        content: {
          from_id: this.chatId,
        },
        contentParse: {
          type: 4,
          content: imgSrc,
          share: {
            type: 4,
            slave: {
              path: imgSrc,
            },
          },
        },
      };
      this.chatList.push(obj);
    },
    // 图片预览
    handlePreviewImage(src) {
      uni.previewImage({
        current: "", // 当前显示图片的 http 链接
        urls: [src], // 需要预览的图片 http 链接列表
      });
    },
    // 已读回执
    handleReceiptReport() {
      let ids = [];
      for (let i = 0; i < this.oppChatList.length; i++) {
        // if(this.chatId === this.chatList[i].content.from_id)
        ids.push(this.oppChatList[i].msg_id);
      }
      // console.log("oppChatList", this.oppChatList);
      if (!ids.length) return;
      let params = {
        username: this.chatId,
        msg_ids: ids,
      };
      getApp().globalData.tim &&
        getApp()
          .globalData.tim.addSingleReceiptReport(params)
          .onSuccess((data, msg_ids) => {
            // console.log('onSuccess', data)
            this.$bus.$emit("NEED_UPDATE_CONVERSATION");
          })
          .onFail(function (data, msg_ids) {
            // console.log('onFail', data)
          });
    },
    // +更多发送类型
    handleMoreSendClick() {
      if (this.inputFocus) {
        this.inputFocus = false;
      }
      this.faceVisible = false;
      this.moreSendVisible = !this.moreSendVisible;
    },
    // 滚动到底部
    toBottom() {
      let flag = this.chatList.length;
      this.toLast = "item";
      setTimeout(() => {
        this.$nextTick(() => {
          this.toLast = "item" + flag;
          // console.log("触发了滚动到底部", this.toLast);
          // console.log("aaaaaaa");
          let latestMsg = this.chatList[this.chatList.length - 1];
          if (!latestMsg) return;
          switch (
            latestMsg.contentParse.share &&
            latestMsg.contentParse.share.type
          ) {
            // 每次修改过后重新调用一下查询接口
            case 201:
              this.addPersonChatFlow("20");
              this.getPersonChatFlow();
              // console.log("这里是201");
              break;
            case 202:
              this.addPersonChatFlow("20");
              this.getPersonChatFlow();
              // console.log("这里是202");
              break;
            case 204:
              this.addPersonChatFlow("30");
              this.getPersonChatFlow();
              // console.log("这里是204");
              break;
            default:
              break;
          }
        });
      }, 500);
    },
    handleLinechange(detail) {
      if (detail.lineCount > 2) {
        this.lines = "lines2";
      } else if (detail.lineCount > 1) {
        this.lines = "lines1";
      } else {
        this.lines = "0";
      }
    },

    handleBoardChange(height) {
      this.inputBottom = height;
      this.toBottom();
    },

    // 注册
    register(personId) {
      let param = {
        uname: personId,
        password: MD5(personId),
      };
      registerUser(param).then((res) => {
        if (res && +res.code === 200) {
          this.handleSendMsg();
        }
      });
    },
    handleSendFile() {
      // #ifdef MP-WEIXIN
      let opt = {
        count: 1,
        type: "file",
        extension: ["doc", "docx", "xlsx", "pptx", "pdf"],
        success: (res) => {
          const tempFilePath = res.tempFiles[0].path;
          const fileName = res.tempFiles[0].name;
          uni.uploadFile({
            url: uploadAction,
            filePath: tempFilePath,
            name: "file",
            success: (fileRes) => {
              if (fileRes.data) {
                let filePath = "https://img106.job1001.com/" + fileRes.data;
                this.sendFile(filePath, fileName);
              }
            },
            fail: (err) => {
              uni.showToast({
                icon: "none",
                title: "文件发送失败",
              });
            },
          });
        },
        fail: () => {
          uni.showToast({
            title: "文件选择失败",
            icon: "none",
          });
        },
      };
      wx.chooseMessageFile(opt);
      // #endif
    },
    sendFile(filePath, fileName) {
      let content = {
        send_uid: this.selfInfo.uname,
        receive_uid: this.chatId,
        content: "文件",
        share: {
          type: 100,
          slave: {
            name: fileName,
            path: filePath,
          },
        },
        person_iname: this.selfInfo.nickname,
        person_pic: this.selfInfo.pic,
        is_send: "1",
        idate: new Date().getTime(),
      };
      this.createMsgContent(content);
      this.moreSendVisible = false;
    },

    handleFileClick(file) {
      uni.navigateTo({
        url:
          "/pagesSub/public/file/index?name=" +
          file.name +
          "&path=" +
          encodeURIComponent(file.path),
      });
    },
    // 极光错误上报
    reportImLog(data) {
      const params = {
        errorMessage: data,
      };
      reportImLog(params);
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-message: $img-base + "careerPath/";

.nav-job {
  font-size: $uni-font-size-min;
  color: $uni-text-color-666;
}

.title-container {
  display: flex;
  flex-direction: row;
}
.adviser-title {
  font-weight: bold;
  font-size: 36rpx;
  color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  .name-title {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .adviser-role {
    display: inline-block;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
    .u-icon {
      margin-left: 10rpx;
    }
  }
}
.experience-type {
  margin-top: 10rpx;
  margin-left: 8rpx;
  display: inline-flex;
  width: 64rpx;
  height: 32rpx;
  background: #eff9eb;
  border-radius: 4rpx;
  border: 2rpx solid #bfdfa8;
  color: #1bc02b;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}

.chat {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 1rpx;
  .chat-serve-time {
    width: 100%;
    height: 72rpx;
    background-color: #fff3eb;
    color: #ff670f;
    padding: 14rpx 26rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 28rpx;
  }
  .chat-list {
    position: relative;
    flex-grow: 1;
    height: 1rpx;
    // margin-top: 40rpx;
    padding-top: 20rpx;
    ::v-deep .u-load-more-wrap {
      padding: 84rpx 0 12rpx;
    }
    .chat-item {
      margin: 32rpx;
      &:first-of-type {
        margin-top: 0;
      }
      &:last-of-type {
        padding-bottom: 32rpx;
      }
      .item-time {
        margin-bottom: 28rpx;
        font-size: 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 28rpx;
        text-align: center;
      }
      .item-content {
        position: relative;
        display: flex;
        align-items: center;
        // padding: 0 18rpx 0 22rpx;
        padding: 18rpx 18rpx 18rpx 22rpx;
        max-width: calc(100% - 120rpx);
        font-size: 32rpx;
        border-radius: 16rpx;
        box-sizing: border-box;
        white-space: pre-wrap;
        &.image {
          image {
            width: 240rpx;
            // max-height: 270rpx;
            // height: auto;
            // min-height: 274rpx;
            // box-sizing: border-box;
          }
          &.wechatQrcode {
            display: flex;
            flex-direction: column;
            width: 302rpx;
            background-color: white !important;
            image {
              width: 240rpx;
              padding: 20rpx 0;
            }
            .wechatQrcodeTips {
              max-width: 302rpx;
              background: linear-gradient(278deg, #ff8f5d 0%, #ff7537 100%);
              border-radius: 0 0 26rpx 26rpx;
              padding: 14rpx 22rpx 16rpx 22rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 30rpx;
              color: #ffffff;
              line-height: 38rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
        &.other {
          display: flex;
          flex-direction: column;
          align-items: center;
          .cont-title {
            margin-top: 16rpx;
            font-size: $uni-font-size-lg;
          }
          .cont-tips {
            margin-top: 8rpx;
            font-size: $uni-font-size-nor;
            opacity: 0.8;
          }
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 28rpx;
          width: 0;
          height: 0;
          border: 16rpx solid transparent;
        }
      }
      .other-tips {
        text-align: center;
        margin-bottom: $uni-spacing-row-lg;
        &-text {
          padding: 6rpx 32rpx;
          font-size: 24rpx;
          color: #999999;
          background-color: #efefef;
          border-radius: 28rpx;
        }
      }

      .item-opp {
        display: flex;
        justify-content: flex-start;
        padding-right: 54rpx;
        box-sizing: border-box;
        &.item-panel-container {
          padding-right: 102rpx;
        }
        .item-content {
          margin-left: 16rpx;
          background: $uni-bg-color;
          // border-top-left-radius: 0;
          background-color: white;
          &.image {
            padding: 0;
            background-color: transparent;
          }
          &.item-file {
            background: linear-gradient(180deg, #fff6ee 0%, #ffffff 100%);
          }
          &.item-text {
            padding-top: 16rpx;
            padding-bottom: 16rpx;
          }
          &.item-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 16rpx;
            padding-bottom: 16rpx;
            flex: 1;
            .item-panel-msg {
              width: 100%;
            }
            .item-panel-content {
              display: grid;
              grid-template-columns: repeat(2, 1fr); /* 一行两列 */
              grid-gap: 20rpx; /* 列与列之间的间隔 */
              margin-top: 20rpx;
              flex: 1;
              .item-panel-content-button {
                min-width: 196rpx;
                text-align: center;
                padding: 14rpx 20rpx 12rpx 20rpx;
                background: #f1f2f6;
                border-radius: 8rpx;
                font-size: 26rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 46rpx;
              }
            }
          }
        }
      }
      .item-self {
        display: flex;
        justify-content: flex-end;
        padding-left: 54rpx;
        box-sizing: border-box;
        .read-status {
          flex-shrink: 0;
          align-self: center;
          margin-right: 8rpx;
          color: $uni-text-color-999;
          font-size: $uni-font-size-sm;
        }
        .item-content {
          margin-right: 16rpx;
          // border-top-right-radius: 0;
          background-color: white;

          &.image {
            padding: 0;
            background-color: transparent;
          }
          &.image::after {
            display: none;
          }
          &.item-file {
            background: linear-gradient(180deg, #fff6ee 0%, #ffffff 100%);
          }
        }
      }
      .pinkBG {
        .item-content {
          background-color: #ffe7e3;
        }
      }
      .item-avatar {
        flex-shrink: 0;
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        border: 1rpx solid $uni-bg-color-border;
        overflow: hidden;
        box-sizing: border-box;
      }
      .item-file {
        display: flex;
        align-items: center;
        .icon-file {
          flex-shrink: 0;
          width: 96rpx;
          height: 94rpx;
          margin-right: 22rpx;
          background-image: url($img-base-message + "file.png");
        }
        .file-name {
          flex-grow: 1;
          color: #e8870d;
          font-size: 26rpx;
          line-height: 40rpx;
          max-height: 80rpx;
        }
      }
    }
    .marketing-card {
      height: 184rpx;
      margin: 0 32rpx;
      background-color: #ffffff;
      padding: 24rpx 20rpx 20rpx 20rpx;
      border-radius: 8rpx;
      display: flex;
      flex-direction: row;
      position: relative;
      .left-image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 5rpx;
        background-image: url($img-base-message + "salePic.png");
        background-size: 100% 100%;
      }
      .right-info {
        margin-left: 12rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #000000;
        }
        .desc {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
        }
        .price-info {
          display: flex;
          flex-direction: row;
          align-items: center;
          .current-price {
            font-size: 32rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            color: #f75a3e;
          }
          .original-price {
            margin-left: 18rpx;
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #555550;
            position: relative;
            .red-line {
              width: 100%;
              height: 2rpx;
              background-color: #f75a3e;
              position: absolute;
              top: 45%;
            }
          }
          .falsh-sales {
            width: 104rpx;
            height: 40rpx;
            background: #fff2f0;
            border-radius: 4rpx;
            border: 2rpx solid #f75a3e;
            font-size: 20rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ff411f;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-left: 16rpx;
          }
        }
      }
      .buy-button {
        position: absolute;
        bottom: 20rpx;
        right: 20rpx;
        width: 112rpx;
        height: 48rpx;
        background: #f75a3e;
        border-radius: 33rpx;
        font-size: 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .consult-state {
    padding-top: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #888888;
    font-size: 24rpx;
    margin-left: 46rpx;
    .state-step {
      cursor: pointer;
    }
    .stepActive {
      color: #ff711e;
    }
    .stepArrowActive {
      color: #ff711e;
    }
    .stepArrow {
      color: #888888;
    }
  }
  .chat-send-wrap {
    flex-shrink: 0;
    background-color: #fff;
  }

  .chat-send {
    display: flex;
    justify-content: space-between;
    padding: 24rpx 32rpx 0 32rpx;
    background: $uni-bg-color;
    .icon {
      margin-top: 10rpx;
      width: 44rpx;
      height: 44rpx;
      background-size: 100% 100%;
      background-size: 100% 100%;
    }
    .icon-emoji {
      margin-right: 20rpx;
      background-image: url($img-base-message + "emoji.png");
    }
    .icon-keyboard {
      margin-right: 20rpx;
      background-image: url($img-base-message + "keyboard.png");
    }
    .icon-add {
      background-image: url($img-base-message + "add.png");
    }
    .icon-image {
      background-image: url($img-base-message + "image.png");
    }
    .icon-rightProgress {
      background-image: url($img-base-message + "rightProgress.png");
    }
    .icon-result {
      background-image: url($img-base-message + "result.png");
    }
    ::v-deep .chat-input {
      flex-grow: 1;
      flex-shrink: 1;
      display: flex;
      align-items: center;
      position: relative;
      margin-right: 24rpx;
      height: 66rpx;
      border-radius: 44rpx;
      background: $uni-bg-color-grey;
      overflow: auto;
      &.lines1 {
        height: 140rpx;
        textarea {
          height: 140rpx;
        }
      }
      &.lines2 {
        height: 180rpx;
        textarea {
          height: 180rpx;
        }
      }
      textarea {
        padding: 24rpx 32rpx;
        height: 88rpx;
        line-height: $uni-font-size-sec;
        font-size: $uni-font-size-base;
        &.clear {
          padding: 24rpx 0 24rpx 32rpx;
        }
      }
      .clear-icon {
        display: flex;
        align-items: center;
        padding: 0 24rpx;
        height: 100%;
      }
    }
    .btn-common-terms {
      width: 94rpx;
      color: #fff;
      font-size: 22rpx;
      line-height: 44rpx;
      background-color: #f75a3e;
      border-radius: 4rpx;
    }
  }
  .text-send {
    min-width: 112rpx;
    padding: 16rpx 28rpx 14rpx 28rpx;
    // padding: 14rpx;
    background: #f75a3e;
    border-radius: 33rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  .icon-img {
    width: 80rpx;
    height: 80rpx;
    background-image: url($img-base-message + "img.png");
    background-size: 100% 100%;
  }
  .icon-file-fill {
    width: 80rpx;
    height: 80rpx;
    background-image: url($img-base-message + "file-fill.png");
    background-size: 100% 100%;
  }
  .more-send {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 24rpx 32rpx;
    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 125rpx;
      color: $uni-text-color-666;
      font-size: $uni-font-size-sm;
      width: 25%;
      .img {
        width: 124rpx;
        height: 124rpx;
        margin: 28rpx 0 14rpx;
      }
    }
  }
  .face-scroll {
    height: 300rpx;
    padding-top: 20rpx;
    .face-wrap {
      display: flex;
      flex-wrap: wrap;
      padding-left: 10rpx;
      .face-item {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
        margin: -2rpx 0 0 -2rpx;
        padding: 8rpx 4rpx;
        text-align: center;
        height: 84rpx;
        width: 84rpx;
        // border: 2rpx solid #e8e8e8;
        &-img {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
  .communication-position {
    margin-top: 16rpx;
    padding-top: 16rpx;
    border-top: 2px solid #eee;
  }
}
.book-info {
  width: 90vw;
  margin: 0 auto;
  height: 144rpx;
  background: #ffffff;
  border-radius: 8rpx;
  margin-top: 32rpx;
  display: flex;
  padding: 20rpx;
  .left-image {
    .book-image {
      width: 104rpx;
      height: 104rpx;
      border-radius: 8rpx;
    }
  }
  .right-info {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-around;
    margin-left: 18rpx;
    .title {
      font-size: 32rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      color: #000000;
    }
    .book-time {
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #bfbfbf;
    }
  }
}
.remind-time-info {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 40rpx;
  .aside-line {
    width: 130rpx;
    height: 1rpx;
    border: 1rpx solid #d7d7d7;
  }
  .info {
    font-size: 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
}
.content {
  text-align: center;
  background-color: #f4f6f8;
  .header {
    padding: 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 40rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      color: #000000;
    }
  }
  .serve-time {
    width: 100%;
    height: 72rpx;
    background-color: #fff3eb;
    color: #ff670f;
    padding: 14rpx 26rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 28rpx;
  }
  .choose-day {
    width: 100%;
    padding: 16rpx 0rpx;
    box-sizing: border-box;

    .scrollview-box {
      width: 100%;
      white-space: nowrap; /* 不换行显示子元素 */
      overflow-x: auto; /* 超出部分自动显示滚动条 */
    }
    .day-button,
    .day-button-selected {
      width: 120rpx;
      /* height: 142rpx; */
      background: #ffffff;
      border-radius: 8rpx;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24rpx 16rpx 20rpx 18rpx;
      box-sizing: border-box;
      margin-left: 16rpx;
      span {
        font-size: 30rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 400;
        margin-bottom: 10rpx;
      }
    }
    .day-button {
      border: none;
      color: #222222;
    }
    .day-button-selected {
      border: 1px solid #ff711e;
      color: #ff711e;
    }
  }
  .time-list-border {
    width: 100%;
    padding: 0rpx 24rpx 16rpx 24rpx;
    box-sizing: border-box;
  }
  .time-list {
    width: 100%;
    height: 50vh;
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
  }
  .time-card {
    height: 120rpx;
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #f4f4f4;
    .time-card-left {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .available-time {
      height: 48rpx;
      line-height: 48rpx;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-left: 10rpx;
    }
    .available-number {
      border-radius: 200rpx;
      width: 200rpx;
      height: 48rpx;
      line-height: 48rpx;
      color: #ffffff;
      margin-left: 16rpx;
    }
  }
}
.more-card {
  ::v-deep .u-drawer-bottom {
    background-color: #f4f6f8;
  }
  .top {
    padding: 34rpx 32rpx;
    width: 100%;
  }
  .cancel-button {
    position: absolute;
    left: 32rpx;
    top: 34rpx;
  }
  .title {
    margin: 0 auto;
    width: 252rpx;
    height: 40rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #000000;
    line-height: 40rpx;
    text-align: right;
    font-style: normal;
  }
  .more-content {
    height: 80%;
    width: calc(100% - 32rpx);
    margin: 0 auto;
    padding: 0 24rpx;
    box-sizing: border-box;
    .second-title {
      font-weight: 800;
      font-size: 32rpx;
      color: #222222;
    }
    .pre-send-card {
      background-color: #ffffff;
      width: 100%;
      padding: 24rpx 20rpx 20rpx 20rpx;
      border-radius: 8rpx;
      display: flex;
      flex-direction: row;
      position: relative;
      margin-top: 16rpx;
      .left-image {
        /* width: 140rpx; */
        height: 140rpx;
        border-radius: 5rpx;
        background-image: url($img-base-message + "salePic.png");
        background-size: 100% 100%;
        flex-basis: 140rpx;
      }
      .right-info {
        flex: 1;
        position: relative;
        margin-left: 12rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .right-info-title {
          font-size: 32rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #000000;
        }
        .desc {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
        }
        .price-info {
          display: flex;
          flex-direction: row;
          align-items: center;
          .current-price {
            font-size: 32rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            color: #f75a3e;
          }
          .original-price {
            margin-left: 18rpx;
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #555550;
            position: relative;
            .red-line {
              width: 100%;
              height: 2rpx;
              background-color: #f75a3e;
              position: absolute;
              top: 45%;
            }
          }
          .falsh-sales {
            width: 104rpx;
            height: 40rpx;
            background: #fff2f0;
            border-radius: 4rpx;
            border: 2rpx solid #f75a3e;
            font-size: 20rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ff411f;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-left: 16rpx;
          }
        }
        .choose-button,
        .choose-sth {
          width: 40rpx;
          height: 40rpx;
          border-radius: 32rpx;
          border: 2rpx solid #d3d3d3;
          position: absolute;
          right: 10rpx;
          bottom: 10rpx;
        }
        .choose-sth {
          background-image: url($img-base-message + "chooseSth.png");
          background-size: 100%;
        }
      }
    }
  }
  .footer {
    width: calc(100% - 32rpx);
    margin: 0 auto;
    padding: 0 24rpx;
    box-sizing: border-box;
    position: absolute;
    height: 10vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    .footer-left {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #555555;
      span {
        color: #ff835d;
        margin: 0 10rpx;
      }
    }
    .confirm-button {
      width: 234rpx;
      height: 80rpx;
      background: #f75a3e;
      border-radius: 200rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
